<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>远程文件编辑器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        
        .config-section {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
        }
        
        .config-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .config-row input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .config-row label {
            min-width: 80px;
            padding: 8px;
            font-weight: bold;
            color: #555;
        }
        
        .config-row input[type="text"], 
        .config-row input[type="password"] {
            flex: 1;
        }
        
        .config-row input[type="number"] {
            width: 80px;
        }
        
        .status {
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 4px;
            text-align: center;
            font-weight: bold;
        }
        
        .status.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .status.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .status.loading { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
        .status.info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
        
        #fileContent {
            width: 100%;
            height: 300px;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            resize: vertical;
            box-sizing: border-box;
        }
        
        .buttons {
            text-align: center;
            margin-top: 15px;
        }
        
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        button:hover:not(:disabled) { background: #0056b3; }
        button:disabled { background: #6c757d; cursor: not-allowed; }
        
        .connection-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #dc3545;
            margin-right: 8px;
        }
        
        .connection-indicator.connected { background: #28a745; }
        
        @media (max-width: 600px) {
            .config-row { flex-direction: column; }
            .config-row label { min-width: auto; }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>远程文件编辑器</h1>
        
        <!-- 配置区域 -->
        <div class="config-section">
            <h3>远程服务器配置</h3>
            <div class="config-row">
                <label>名称:</label>
                <input type="text" id="name" placeholder="标识名称" value="云主机">
                <label>主机:</label>
                <input type="text" id="host" placeholder="IP地址或域名" value="10.21.162.157">
                <label>端口:</label>
                <input type="number" id="port" value="22" min="1" max="65535">
            </div>
            <div class="config-row">
                <label>用户名:</label>
                <input type="text" id="username" placeholder="SSH用户名" value="root">
                <label>密码:</label>
                <input type="password" id="password" placeholder="SSH密码">
            </div>
            <div class="config-row">
                <label>文件路径:</label>
                <input type="text" id="remotePath" placeholder="/path/to/file.txt" value="/home/mm/test.py">
            </div>
        </div>
        
        <!-- 状态显示 -->
        <div id="status" class="status info">
            <span class="connection-indicator" id="indicator"></span>
            <span id="statusText">就绪</span>
        </div>
        
        <!-- 文件内容 -->
        <textarea id="fileContent" placeholder="文件内容将在这里显示..."></textarea>
        
        <!-- 操作按钮 -->
        <div class="buttons">
            <button onclick="testConnection()">测试连接</button>
            <button onclick="loadFile()">加载文件</button>
            <button onclick="saveFile()">保存文件</button>
            <button onclick="clearContent()" style="background: #6c757d;">清空</button>
        </div>
        
        <div style="margin-top: 20px; padding: 10px; background: #e9ecef; border-radius: 4px; font-size: 12px; color: #6c757d;">
            <strong>说明:</strong> 填写服务器配置 → 测试连接 → 加载文件 → 编辑 → 保存文件
        </div>
    </div>

    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
    <script>
        const socket = io();
        const statusDiv = document.getElementById('status');
        const statusText = document.getElementById('statusText');
        const indicator = document.getElementById('indicator');
        const fileContent = document.getElementById('fileContent');
        
        // 获取配置信息
        function getConfig() {
            return {
                name: document.getElementById('name').value.trim(),
                host: document.getElementById('host').value.trim(),
                port: document.getElementById('port').value,
                username: document.getElementById('username').value.trim(),
                password: document.getElementById('password').value,
                remote_path: document.getElementById('remotePath').value.trim()
            };
        }
        
        // 更新状态
        function updateStatus(message, type = 'info', connected = false) {
            statusText.textContent = message;
            statusDiv.className = `status ${type}`;
            indicator.className = connected ? 'connection-indicator connected' : 'connection-indicator';
        }
        
        // 验证配置
        function validateConfig() {
            const config = getConfig();
            if (!config.name || !config.host || !config.username || !config.password || !config.remote_path) {
                updateStatus('请填写完整的服务器配置信息', 'error');
                return false;
            }
            return true;
        }
        
        // 测试连接
        function testConnection() {
            if (!validateConfig()) return;
            
            updateStatus('正在测试连接...', 'loading');
            

            socket.emit('test_connection', { config: getConfig() });
        }
        
        // 加载文件
        function loadFile() {
            if (!validateConfig()) return;
            
            updateStatus('正在加载文件...', 'loading');
            socket.emit('load_file', { config: getConfig() });
        }
        
        // 保存文件
        function saveFile() {
            if (!validateConfig()) return;
            
            updateStatus('正在保存文件...', 'loading');
            socket.emit('save_file', { 
                config: getConfig(), 
                content: fileContent.value 
            });
        }
        
        // 清空内容
        function clearContent() {
            if (confirm('确定要清空内容吗？')) {
                fileContent.value = '';
                updateStatus('内容已清空', 'info');
            }
        }
        
        // Socket事件监听
        socket.on('connect', function() {
            updateStatus('已连接到服务器', 'success', true);
        });
        
        socket.on('disconnect', function() {
            updateStatus('与服务器断开连接', 'error');
        });
        
        socket.on('connection_result', function(data) {
            if (data.success) {
                updateStatus(data.message, 'success');
            } else {
                updateStatus(data.message, 'error');
            }
        });
        
        socket.on('file_result', function(data) {
            if (data.success) {
                fileContent.value = data.content;
                updateStatus(data.message, 'success');
            } else {
                updateStatus(data.message, 'error');
            }
        });
        
        socket.on('save_result', function(data) {
            if (data.success) {
                updateStatus(data.message, 'success');
            } else {
                updateStatus(data.message, 'error');
            }
        });
        
        // 快捷键
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 's') {
                e.preventDefault();
                saveFile();
            }
        });
    </script>
</body>
</html>